<template>
    <div class="field-control field-check">
        <DatePicker :disabled="disabled" placement="bottom-end" @on-clear="dateClear" :value="dateValue" @input="dateInput" :type="controlType" :placeholder="placeholder"></DatePicker>
        <div class="field-message" v-show="!validate">{{message}}</div>
    </div>
</template>
<script>
import base from "./numberRange";
import Time from "@/common/time";
export default {
  extends: base,
  data() {
    return {
      formatStr: "YYYY-MM-DD hh:mm:ss",
      controlType: "datetimerange",
      placeholder: "选择时间范围"
    };
  },
  computed: {
    dateValue() {
      if (this.valueStart || this.valueEnd) {
        return [
          Time.toTime(this.valueStart, this.formatStr),
          Time.toTime(this.rowData[this.codeEnd], this.formatStr)
        ];
      } else {
        return [null, null];
      }
    }
  },
  methods: {
    dateInput(e) {
      if (e[0] || e[1]) {
        this.$emit("extInput", {
          code: this.codeStart,
          value: Time.toTs(e[0])
        });
        this.$emit("extInput", {
          code: this.codeEnd,
          value: Time.toTs(e[1])
        });
      }
    },
    dateClear(e) {
      this.$emit("extInput", {
        code: this.codeStart,
        value: null
      });
      this.$emit("extInput", {
        code: this.codeEnd,
        value: null
      });
    }
  }
};
</script>
<style lang="less">
.field-control .ivu-date-picker {
  width: 100%;
}
</style>
